<template>
    <Row class="bj" v-show="showGossips">
        <Row>
            <Col  :pull="pullVal"><h2>{{divinatoryWords.composition}}</h2></Col>
        </Row>
        <Row>
            <Col :push="pushVal" :xs="6" :sm="10" :md="10" :lg="10" >
                <Row class="el-row-g"
                     v-for="(item, index) in divinatory"
                     :key="index">
                    <Row v-if="item == 1">
                        <Col class="grid-content bg-purple"></Col>
                    </Row>
                    <Row v-else>
                        <Col  class="grid-content bg-purple-half"></Col>
                        <Col  class="grid-content bg-purple-half"></Col>
                    </Row>
                </Row>
            </Col>
            <Col :push="pullVal" :xs="6" :sm="10" :md="10" :lg="10" >
<!--                <el-descriptions  :column="1">-->
<!--                    <el-descriptions-item label="卦象"-->
<!--                    >{{ divinatoryWords.explanation }}&#45;&#45;{{-->
<!--                            divinatoryWords.grade-->
<!--                        }}</el-descriptions-item-->
<!--                    >-->
<!--                    <el-descriptions-item label="推断">{{-->
<!--                            divinatoryWords.infer-->
<!--                        }}</el-descriptions-item>-->
<!--                    <el-descriptions-item label="卦辞">{{-->
<!--                            divinatoryWords.hexagram-->
<!--                        }}</el-descriptions-item>-->
<!--                    <el-descriptions-item label="象辞">{{-->
<!--                            divinatoryWords.elephant-->
<!--                        }}</el-descriptions-item>-->
<!--                    <el-descriptions-item label="运势">{{-->
<!--                            divinatoryWords.fortune-->
<!--                        }}</el-descriptions-item>-->
<!--                    <el-descriptions-item label="爱情">{{-->
<!--                            divinatoryWords.love-->
<!--                        }}</el-descriptions-item>-->
<!--                    <el-descriptions-item label="疾病">{{-->
<!--                            divinatoryWords.disease-->
<!--                        }}</el-descriptions-item>-->
<!--                    <el-descriptions-item label="失物">{{-->
<!--                            divinatoryWords.lostArticles-->
<!--                        }}</el-descriptions-item>-->
<!--                    <el-descriptions-item label="诉讼">{{-->
<!--                            divinatoryWords.litigation-->
<!--                        }}</el-descriptions-item>-->
<!--                </el-descriptions>-->
            </Col>
        </Row>
    </Row>
<!--    <el-row class="bj" v-show="showGossips">-->
<!--      <el-row>-->
<!--         <el-col :pull="pullVal"><h2>{{divinatoryWords.composition}}</h2></el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col  :push="pushVal" :xs="6" :sm="10" :md="10" :lg="10" >-->
<!--          <el-row-->
<!--              class="el-row-g"-->
<!--              v-for="(item, index) in divinatory"-->
<!--              :key="index">-->
<!--            <el-row v-if="item == 1">-->
<!--              <el-col class="grid-content bg-purple"></el-col>-->
<!--            </el-row>-->
<!--            <el-row v-else>-->
<!--              <el-col  class="grid-content bg-purple-half"></el-col>-->
<!--              <el-col  class="grid-content bg-purple-half"></el-col>-->
<!--            </el-row>-->
<!--          </el-row>-->
<!--        </el-col>-->
<!--        <el-col  :push="pullVal" :xs="6" :sm="10" :md="10" :lg="10" >-->
<!--          <el-descriptions  :column="1">-->
<!--            <el-descriptions-item label="卦象"-->
<!--            >{{ divinatoryWords.explanation }}&#45;&#45;{{-->
<!--                divinatoryWords.grade-->
<!--              }}</el-descriptions-item-->
<!--            >-->
<!--            <el-descriptions-item label="推断">{{-->
<!--                divinatoryWords.infer-->
<!--              }}</el-descriptions-item>-->
<!--            <el-descriptions-item label="卦辞">{{-->
<!--                divinatoryWords.hexagram-->
<!--              }}</el-descriptions-item>-->
<!--            <el-descriptions-item label="象辞">{{-->
<!--                divinatoryWords.elephant-->
<!--              }}</el-descriptions-item>-->
<!--            <el-descriptions-item label="运势">{{-->
<!--                divinatoryWords.fortune-->
<!--              }}</el-descriptions-item>-->
<!--            <el-descriptions-item label="爱情">{{-->
<!--                divinatoryWords.love-->
<!--              }}</el-descriptions-item>-->
<!--            <el-descriptions-item label="疾病">{{-->
<!--                divinatoryWords.disease-->
<!--              }}</el-descriptions-item>-->
<!--            <el-descriptions-item label="失物">{{-->
<!--                divinatoryWords.lostArticles-->
<!--              }}</el-descriptions-item>-->
<!--            <el-descriptions-item label="诉讼">{{-->
<!--                divinatoryWords.litigation-->
<!--              }}</el-descriptions-item>-->
<!--          </el-descriptions>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </el-row>-->
<!--  </el-row>-->
</template>
<script>
export default {
  name: "Gossip",
  data() {
    return {
      gossips: require("../../public/static/gossip.json"),
      divinatoryWords: "",
      divinatory: [],
      pullVal:2,
      pushVal:3,
    };
  },
  props:['showGossips'],
  methods: {
    luck() {
      if (!this.divinatoryWords) {
        this.divinatoryWords = JSON.parse(localStorage.getItem("gossips"));
        if (!this.divinatoryWords) {
          this.divinatoryWords = this.gossips[Math.round(Math.random() * 63)];
          localStorage.setItem("gossips", JSON.stringify(this.divinatoryWords));
        }
        this.divinatory = this.divinatoryWords["code"].split("");
      }
    },
  },
  mounted(){
    this.luck();
  }
};
</script>
<style scoped>
.el-row-g {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  margin-right: 20px;
}
.bg-purple {
  width: 260px;
  background: #000000;
}
.bg-purple-half {
  width: 120px;
  background: #000000;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>
